<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<link rel="stylesheet" type="text/css" href="css/my_account.css" />
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.js"></script>
		<script src="js/element-ui.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jsAdress.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
		<title>我的账户</title>
		<style type="text/css">
			table tr th {
				border: none;
			}
			
			table {
				border-collapse: collapse;
			}
		</style>
	</head>

	<body>
		<div class="top_bar_wrap">
			<div class="top_bar">
				<div class="top_bar_lf lf">
					您好，欢迎来到爱贝宠宠物网！
				</div>
				<div class="top_bar_rg rg">
					<a class="login rg" href="login.html">登录</a>
					<a class="rigester rg" href="register.html">注册</a>
					<a href="shopCar.html"><span class="shop_car rg">购物车&nbsp;<span>0</span></span>
					</a>
					<a class="help rg" href="#">帮助中心</a>
					<a class="help rg" href="index.html">首页</a>

				</div>
			</div>
		</div>

		<div class="account_container" id="my_account">
			<div class="aside_left">
				<p>我的账户</p>
				<ul>
					<li>收货地址管理</li>
				</ul>
			</div>
			<div class="aside_right">
				<p>添加收货地址</p>
				<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
					<el-form-item label="选择省/市/区" prop="region">
						<el-select @change="changeProvince(valueProvince)" v-model="valueProvince" placeholder="请选择省">
							<el-option v-for="item in ProvinceList" :key="item.area_id" :label="item.area_name" :value="item.area_id">
							</el-option>
						</el-select>
						<el-select @change="changeCity(valueCity)" v-model="valueCity" placeholder="请选择市">
							<el-option v-for="item in CityList" :key="item.area_id" :label="item.area_name" :value="item.area_id">
							</el-option>
						</el-select>
						<el-select @change="changeArea(valueArea)" v-model="valueArea" placeholder="请选择区">
							<el-option v-for="item in AreaList" :key="item.area_id" :label="item.area_name" :value="item.area_id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="详细地址：">
						<el-input type="textarea" v-model="ruleForm.detailAddress"></el-input>
					</el-form-item>
					<el-form-item label="收货人：" >
						<el-input v-model="ruleForm.name"></el-input>
					</el-form-item>
					<el-form-item label="手机号码：">
						<el-input v-model="ruleForm.phone"></el-input>
					</el-form-item>
					<el-form-item label="邮编：">
						<el-input v-model="ruleForm.coding"></el-input>
					</el-form-item>
					<el-form-item label="省份证号：">
						<el-input v-model="ruleForm.id_card"></el-input>
					</el-form-item>
					<el-form-item label="设为默认：">
						<el-switch v-model="addIsMoren" active-color="#13ce66" inactive-color="#a5a5a5">
						</el-switch>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="submitAddress('ruleForm')">保存</el-button>
					</el-form-item>
				</el-form>

				<p style="padding-top: 40px;">已保存了（{{adr_list.length}}）条收货地址</p>

				<template>
					<el-table :data="adr_list" border style="width: 100%">
						<el-table-column prop="name" label="收货人" width="120">
						</el-table-column>
						<el-table-column prop="provineCityCountry" label="所在地区" width="200">
						</el-table-column>
						<el-table-column prop="address" label="详细地址" width="200">
						</el-table-column>
						<el-table-column prop="phone" label="电话/手机" width="120">
						</el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
								<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
							</template>
						</el-table-column>
						<el-table-column label="" width="120">
							<template slot-scope="scope">
								<span v-if="scope.row.is_default === '1'">默认地址</span>
							</template>
						</el-table-column>
					</el-table>
				</template>
			</div>
		</div>

		<script src="js/my_account.js" type="text/javascript" charset="utf-8"></script>
	</body>

</html>